<template>
  <div class="fiveGuaranteesOne">
    <!-- 筛选条件 -->
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        class="-mb-15px"
        :model="queryParams"
        :inline="false"
        label-width="130px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名" prop="patientName">
              <el-input v-model="queryParams.patientName" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号码" prop="idNumber">
              <el-input v-model="queryParams.idNumber" placeholder="请输入身份证号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="queryParams.gender" placeholder="请选择性别" clearable>
                <el-option
                  v-for="dict in getIntDictOptions(DICT_TYPE.GENDER)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="现住详址" prop="currentAddress">
              <el-input
                v-model="queryParams.currentAddress"
                placeholder="请输入现住详址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包保乡干部" prop="townCadreName">
              <el-input v-model="queryParams.townCadreName" placeholder="请输入包保乡干部" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包保村干部" prop="villageCadreName">
              <el-input v-model="queryParams.villageCadreName" placeholder="请输入包保村干部" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="精防医生" prop="doctorName">
              <el-input v-model="queryParams.doctorName" placeholder="请输入精防医生" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="包保民警" prop="policeName">
              <el-input v-model="queryParams.policeName" placeholder="请输入包保民警" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24" class="text-right">
            <el-form-item>
              <el-button
                type="primary"
                @click="handleAdd('action.add')"
                v-hasPermi="['business:key-person-protection:create']"
                >新增</el-button
              >
              <el-button
                type="primary"
                @click="handleQuery"
                v-hasPermi="['business:key-person-protection:query']"
                >查询</el-button
              >
              <el-button @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                @click="handleImport"
                v-hasPermi="['business:key-person-protection:import']"
                >导入</el-button
              >
              <el-button
                type="success"
                @click="handleExport"
                :loading="exportLoading"
                v-hasPermi="['business:key-person-protection:export']"
              >
                模板下载
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <div class="content">
        <!-- 区域树 -->
        <div class="tree-box">
          <RegionTree v-model:checkedKeys="selectedKeys" :isExpand="true" :checkStrictly="false" />
        </div>
        <div style="width: 80%; height: calc(100vh - 365px)">
          <el-table
            size="large"
            v-loading="loading"
            :data="lists"
            border
            style="width: 100%"
            height="90%"
          >
            <!-- 序号 -->
            <el-table-column type="index" label="序号" width="80" align="center" fixed />
            <el-table-column
              label="姓名"
              prop="patientName"
              width="80"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="性别" prop="gender" width="80" align="center">
              <template #default="scope">
                {{ getDictLabel(DICT_TYPE.GENDER, scope.row.gender) }}
              </template>
            </el-table-column>
            <el-table-column
              label="证件号"
              prop="idNumber"
              width="200"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="现住详址"
              prop="currentAddress"
              width="230"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="所属机构"
              prop="deptName"
              width="150"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="联系方式" align="center" prop="phone" />
            <el-table-column label="评定的风险等级" align="center" prop="riskAssessment" />
            <el-table-column
              label="监护人"
              prop="guardian"
              width="100"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="患者监护人关系" align="center" prop="guardianPatientRelationship" />
            <el-table-column label="监护人电话" prop="contact" width="130" align="center" />
            <el-table-column label="包保乡干部" prop="townCadreName" width="130" align="center" />
            <el-table-column
              label="包保乡干部联系方式"
              prop="townCadrePhone"
              width="180"
              align="center"
            />
            <el-table-column label="包保村干部" prop="villageCadreName" width="130" align="center" />
            <el-table-column
              label="包保村干部联系方式"
              prop="villageCadrePhone"
              width="180"
              align="center"
            />
            <el-table-column label="精防医生" prop="doctorName" width="130" align="center" />
            <el-table-column
              label="精防医生联系方式"
              prop="doctorPhone"
              width="180"
              align="center"
            />
            <el-table-column label="包保民警" prop="policeName" width="130" align="center" />
            <el-table-column
              label="包保民警联系方式"
              prop="policePhone"
              width="180"
              align="center"
            />
            <el-table-column label="备注（是否为2025年评定录入人员）" align="center" prop="remark" />
            <el-table-column label="操作" width="180" fixed="right" align="center">
              <template #default="scope">
                <el-button
                  v-hasPermi="['business:key-person-protection:query']"
                  type="primary"
                  link
                  @click="handleView(scope.row)"
                >
                  详情
                </el-button>
                <el-button
                  v-hasPermi="['business:key-person-protection:update']"
                  type="primary"
                  link
                  @click="handleEdit('action.edit', scope.row.id)"
                >
                  修改
                </el-button>
                <el-button
                  v-hasPermi="['business:key-person-protection:delete']"
                  type="danger"
                  link
                  @click="handleDelete(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getLists"
          />
        </div>
      </div>
    </ContentWrap>
    <FiveGuaranteesOneInfoDetail ref="fiveGuaranteesOneInfoDetailRef" />
        <!-- 五帮一新增对话框 -->
    <FiveGuaranteesOneInfoAdd ref="fiveGuaranteesOneInfoAdd" @success="getLists" />
    <!-- 五帮一导入对话框 -->
    <FiveGuaranteesOneImportForm ref="importFormRef" @success="getLists" />
  </div>
  
</template>

<script lang="ts" setup name="FiveGuaranteesOne">
import * as FiveGuaranteesOne from '@/api/patient/fiveGuaranteesOne'
import { getDept } from '@/api/system/dept'
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import download from '@/utils/download'
import { formatDate } from '@/utils/formatTime'
import FiveGuaranteesOneInfoDetail from './components/FiveGuaranteesOneInfoDetail.vue'
import FiveGuaranteesOneInfoAdd from './components/FiveGuaranteesOneInfoAdd.vue'
import FiveGuaranteesOneImportForm from './components/FiveGuaranteesOneImportForm.vue'
// 选中的节点 ID
const selectedKeys = ref<string[]>([])
const message = useMessage() // 消息弹窗
const exportLoading = ref(false) // 导出的加载中
const queryParams = reactive({
  patientCode: undefined, // 从路由 query 中获取的患者编码
  patientName: undefined,
  idNumber: undefined,
  gender: undefined,
  currentAddress: undefined,
  townCadreName: undefined,
  villageCadreName: undefined,
  doctorName: undefined,
  policeName: undefined,
  deptIds: [],
  pageNo: 1,
  lastFollowupDate: [],
  nextFollowupDate: [],
  hospitalizationStatus: undefined,
  // currentDiagnosis: undefined,
  dangerousBehavior: undefined,
  pageSize: 10
})

const loading = ref(true) // 列表的加载中
const lists = ref<any[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getLists = async () => {
  loading.value = true
  try {
    const data = await FiveGuaranteesOne.getFiveGuauaranteesOne(queryParams)
    lists.value = data.list
    total.value = data.total
    // 获取每条数据的所属机构名称
    await Promise.all(
      lists.value.map(async (item) => {
        if (item.deptId) {
          try {
            const deptData = await getDept(item.deptId)
            item.deptName = deptData.name
          } catch (error) {
            item.deptName = ''
          }
        } else {
          item.deptName = ''
        }
      })
    )
  } finally {
    loading.value = false
  }
}
/** 查询按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getLists()
}

/** 重置按钮操作 */
const resetQuery = () => {
  //form表单重置
  queryFormRef.value?.resetFields()
  handleQuery()
}
/** 新增 */
const fiveGuaranteesOneInfoAdd = ref()
const handleAdd = (type: string) => {
  fiveGuaranteesOneInfoAdd.value.open(type, null)
}
/** 修改 */
const handleEdit = (type: string, id: string) => {
  fiveGuaranteesOneInfoAdd.value.open(type, id)
}
const handleDelete = async (id: number) => {
  await message.delConfirm()
  await FiveGuaranteesOne.deleteFiveGuauaranteesOne(id)
  getLists()
}
/** 五帮一导入 */
const importFormRef = ref()
const handleImport = () => {
  importFormRef.value.open()
}
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await FiveGuaranteesOne.exportPost(queryParams)
    download.excel(data, '五帮一模板.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
const fiveGuaranteesOneInfoDetailRef = ref()
// 详情按钮操作
const handleView = (row: any) => {
  fiveGuaranteesOneInfoDetailRef.value.open(row.id, row)
}
onMounted(() => {
  // 从 query 中获取 patientCode
  const route = useRoute()
  if (route.query.patientCode) {
    queryParams.patientCode = route.query.patientCode
  }
  getLists()
})
// 监听勾选的值
watch(selectedKeys, (newCheckedKeys) => {
  queryParams.deptIds = newCheckedKeys // 更新queryParams中的值
  handleQuery()
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
}
.tree-box {
  width: 330px;
  height: calc(100vh - 365px);
  overflow: auto;
  margin-right: 16px;
}
.upload-demo {
}
</style>
